import React, {Component} from 'react';

import {
    View,
    StyleSheet,
    WebView,
} from 'react-native';
import NavigationBar from "../common/NavigationBar";
import ViewUtil from "../util/ViewUtil";

export default class WebViews extends Component {
    constructor(props) {
        super(props)
        this.state = {
            url      : this.props.url,
            title    : this.props.title,
            canGoBack: false,
        }
    }

    onNavigationStateChange(e) {
        this.setState({
            title    : e.title !== '' ? e.title : this.state.title,
            canGoBack: e.canGoBack
        })
    }

    onGoBack() {
        if (this.state.canGoBack) {
            this.webView.goBack()
        } else {
            this.props.navigator.pop()
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={this.state.title}
                    leftButton={ViewUtil.goBackButton(() => {
                        this.onGoBack()
                    })}
                />
                <WebView
                    ref={(webView) => {
                        this.webView = webView
                    }}
                    source={{uri: this.state.url}}
                    onNavigationStateChange={(e) => {
                        this.onNavigationStateChange(e)
                    }}
                    startInLoadingState={true}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },

})